<template>
  <view class="lang-dialog__wrapper" v-if="dialogVisible">
    <view class="lang-dialog">
      <view class="lang-dialog__header">
        <view class="lang-dialog__title"><slot name="title">{{title}}</slot></view>
        <view type="button" class="lang-dialog-header-btn" @click="close"> <i class="lang-icon-close"></i> </view>
      </view>
      <view class="lang-dialog__body">
        <view class="tips" v-show="failed"><slot name="errorText">{{ errorText }}</slot></view>
        <view class="tips" v-show="!failed"><slot name="tips">{{ tips }}</slot></view>
        <view class="slider-body" :class="{'slider-shock':shock}">
          <view class="loading-transparent-mask" v-show="mask"></view>
          <view class="loading-body" v-if="loading">
            <view class="loading slider-loading"></view>
          </view>
          <view class="slider-bg slider-img" :style="{'background-image': 'url(' + sliderImg + ')'}" v-show="sliderImg"></view>
          <view class="slider-draw slider-move-draw slider-img"
						:style="{'background-image': 'url(' + sliderImg + ')', 'top': sliderY + 'px', 'left': sliderMoveDrawLeft}"
						v-show="sliderImg"
						@touchstart.stop="sliderTouchStart"
						@touchmove.catch="sliderTouchMove"
						@touchend.stop="sliderEnd"
						@mousedown="sliderStart"
						>
          </view>
          <view class="slider-progress"></view>
          <view class="slider-success" v-show="success">
            <view class="slider-success-icon">
							<image src=""
                alt=""></image>
						</view>
            <view class="slider-success-text"><slot name="successText">{{successText}}</slot></view>
          </view>
          <view class="slider-btn slider-move-btn"
						:style="{'left': sliderMoveLeft}" 
						:class="{'slider-shock':shock}"
						@touchstart.stop="sliderTouchStart"
						@touchmove.stop="sliderTouchMove"
						@touchend.stop="sliderEnd"
						@mousedown="sliderStart"
					>
						<image src="" alt=""></image>
					</view>
        </view>
        <view style="position:relative;">
					<!-- #ifndef MP -->
          <view class="slider-refresh" style="font-size: 29px;" @click.stop="" @mouseenter="questionMessage = true" @mouseleave="questionMessage = false">
          <!-- #endif -->
					<!-- #ifdef MP -->
					<view class="slider-refresh" style="font-size: 29px;" @click.stop="" @touchstart="questionMessage = true" @touchend="questionMessage = false">
					<!-- #endif -->
					  <view class="slider-tools-btn lang-tips">
					    <view class="lang-tips-item lang-tips-bottom" v-show="questionMessage">
								<slot name="question">
									<view v-if="question">{{question}}</view>
									<view v-else>
										拖动滑块完成拼图，欢迎提建议！
										<!-- #ifndef MP -->
											<a href="https://gitee.com/langlanglang/poster" target="_blank">gitee</a>
											<a href="https://github.com/kkokk/poster" target="_blank">github</a>
										<!-- #endif -->
									</view>
								</slot>
								</view>
					    <image src="" alt=""></image>
					  </view>
					</view>
					<view class="slider-refresh" style="left: 35px;" @click.stop="refresh" @mouseenter="refreshMessage = true" @mouseleave="refreshMessage = false">
            <view class="slider-tools-btn lang-tips" style="width:24px;height: 24px;margin-top: -2px;"> <!-- 刷新 -->
              <view class="lang-tips-item lang-tips-bottom" v-show="refreshMessage"> 刷新</view>
              <image src="" alt=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SliderCaptcha',
  props:{
    value: {
		type: Boolean,
		defalut: false
	},
	modelValue: {
		type: Boolean,
		defalut: false
	},
    loading: {
      type: Boolean,
      defalut: false
    },
    title: {
      type: String,
      default: '滑块安全验证'
    },
    tips: {
      type: String,
      default: '拖动下方滑块完成拼图'
    },
    successText: {
      type: String,
      default: '验证成功'
    },
    errorText:{
      type: String,
      default: '是不是太难了，咱换一个'
    },
	question: {
		type: String,
		default: ''
	},
    options: {
		type: Object,
    }
  },
  watch: {
    value: {
	  handler: function(val) {
		this.init(val)
	  },
	  immediate: true
	},
	modelValue: {
	  handler: function(val) {
		this.init(val)
	  },
	  immediate: true
	},
    options: {
      handler: function(option) {
        this.clear()
        this.sliderImg = option.sliderImg
        this.sliderKey = option.sliderKey
        this.sliderY = option.sliderY
      },
      deep:true,
      immediate: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      mask: false,
      success: false,
      failed: false,
      sliderImg:'',
      sliderKey: '',
      sliderX: 27,
      sliderY: '',
      sliderMoveDrawLeft: '27px',
      sliderMoveLeft: '20px',
      shock: false,
      tipEvents: {},
		sliderMoveX: 0,
		questionMessage: false,
		refreshMessage: false,
    }
  },
  methods: {
    init(open){
		this.dialogVisible = open
		if (open) {
			this.clear()
		}
	},
    clear() {
      this.mask = false
      this.success = false
      this.failed = false
      this.sliderImg = ''
      this.sliderKey = ''
      this.sliderX = 27
      this.sliderMoveDrawLeft = '27px',
      this.sliderMoveLeft = '20px',
      this.sliderY = ''
    },
    check(sliderKey, sliderX){
      this.$emit('check', sliderKey, sliderX, this.done, this.error)
    },
    done(){
      this.success = true
    },
    error() {
      this.failed = true
      this.mask = true
      this.shock = true
      setTimeout(() => {
        this.shock = false
        this.$emit('error')
      }, 1000)
    },
    close() {
      this.dialogVisible = false
      this.$emit('input', this.dialogVisible)
      this.$emit('update:modelValue', this.dialogVisible)
      this.$emit('close')
    },
    refresh(){
      this.$emit('refresh')
    },
	sliderTouchStart(e) {
		// 移动触摸移动
		const that = this
		const slider = e.target
		that.sliderMoveX = e.touches[0].clientX - slider.offsetLeft
	},
	sliderTouchMove(e) {
		const that = this
		const left = e.touches[0].clientX - that.sliderMoveX
		if (left >= 20 && left <= 280) {
			that.sliderMoveDrawLeft = 5 + left + 'px';
			that.sliderMoveLeft = left + 'px';
			that.sliderX = 5 + left;
		}
	},
	sliderEnd(){
		this.check(this.sliderKey, this.sliderX);
	},
	sliderStart(e) {
		var that = this
			const slider = e.target // 获取目标元素
			// 算出鼠标相对元素的位置
			that.sliderMoveX = e.clientX - slider.offsetLeft
			
			document.onmousemove = (e) => {
				const left = e.clientX - that.sliderMoveX
				if (left >= 20 && left <= 280) {
					//   slider.style.left = left + 'px'
					that.sliderMoveDrawLeft = 5 + left + 'px';
					that.sliderMoveLeft = left + 'px';
					that.sliderX = 5 + left;
				}
			}
			
			document.onmouseup = () => {
				document.onmousemove = null
				document.onmouseup = null
				this.check(this.sliderKey, this.sliderX);
			}
		}
  }
}
</script>
<style scoped>
a + a {
	margin-left: 10px;
}
/* 弹窗开始  */
.lang-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  text-align: left;
  z-index: 88888888;
}

.lang-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 30%);
  box-sizing: border-box;
  background: #FFF;
  width: 50%;
  margin-top: calc(50vh - 185px);
  width: 360px;
}

.lang-dialog__header {
  padding: 20px 10px 10px;
}

.lang-dialog__title {
  line-height: 20px;
  font-size: 18px;
  color: #525252;
}

.lang-dialog-header-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px
}

.lang-icon-close {
  color: rgba(0, 0, 0, 0.68);
  font-size: 20px;
}

.lang-icon-close:before {
  content: '×';
}

.lang-icon-close:hover {
  color: rgba(0, 0, 0, 0.88);
}

.lang-dialog__body {
  color: #828282;
  font-size: 14px;
  word-break: break-all;
	padding: 0 10px;
	height: 320px;
}

.loading-transparent-mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 999;
}

/* 弹窗结束  */
/* loading start */
.loading-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  z-index: 999;
}

.loading {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-left: 2px solid #409eff;
  border-right: 2px solid #409eff;
  animation: loading 1s infinite linear;
}

@keyframes loading {
  to {
	transform: rotate(360deg);
  }
}

.slider-loading {
  position: absolute;
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  z-index: 999;
}

/* loading end */
.tips {
  color: #525252;
  line-height: 36px;
  font-size: 18px;
}

.slider-body {
  position: relative;
  width: 100%;
  height: 245px;
}

.slider-bg {
  position: absolute;
  top: 0;
  left: 0;
  background-position: 0px 0px;
  background-size: 340px 251px;
  background-repeat: no-repeat;
  width: 340px;
  height: 191px;
  overflow: hidden;
}

.slider-draw {
  position: absolute;
  left: 27px;
  width: 50px;
  height: 50px;
  background: #fff;
  background-position: -5px -196px;
  background-size: 340px 251px;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
  opacity: 1;
  box-shadow: 0px 0px 10px 2px #000000;
}

.slider-progress {
  position: absolute;
  width: 100%;
  background-image: url('');
  background-position: 0px -213.512px;
  background-size: 345.06px 313.69px;
  width: 340px;
  height: 16px;
  left: 0px;
  top: 210px;
  z-index: 1;
  opacity: 1;
}

.slider-success {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background: hsla(0, 0%, 100%, .8);
}

.slider-success .slider-success-icon {
  width: 64px;
  height: 64px;
  margin: 15% auto 0;
}

.slider-success .slider-success-icon image {
  width: 100%;
  height: 100%;
}

.slider-success .slider-success-text {
  color: #1bc300;
  text-align: center;
  margin-top: 16px;
  font-size: 18px;
}

.slider-btn {
  position: absolute;
  left: 20px;
  top: 200px;
  z-index: 2;
  width: 65px;
  height: 35px;
  line-height: 35px;
  background-color: rgb(0, 87, 212);
  box-shadow: rgba(0, 87, 212, 50%) 0px 0px 5.05952px 0.505952px;
  position: absolute;
  text-align: center;
  border-radius: 999px;
  font-size: 0;
  cursor: pointer;
  opacity: 1;
  z-index: 1;
  -moz-user-select: none;
  /* 禁止双击节点被选中 */
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-user-drag: none;
  /* 禁止被拖动 */
  -webkit-user-drag: none;
  /* 禁止被拖动 */
}

.slider-btn i {
  display: inline-block;
  width: 0;
  vertical-align: middle;
}

.slider-btn image {
  width: 18px;
  height: 13px;
  -moz-user-select: none;
  /* 禁止双击节点被选中 */
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-user-drag: none;
  /* 禁止被拖动 */
  -webkit-user-drag: none;
  /* 禁止被拖动 */
  pointer-events: none;
  display: inline-block;
  vertical-align: middle;
}

.slider-refresh {
  position: absolute;
  cursor: pointer;
  left: 0px;
  top: 0px;
  z-index: 2;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
}

.slider-tools-btn {
  position: relative;
  width: 25px;
  height: 25px;
}

/* tips */
.lang-tips a {
  text-decoration: none;
  color: #409eff;
}

.lang-tips-item {
  position: fixed;
  font-size: 14px;
  color: #525252;
  max-width: 340px;
  margin-top: 40px;
  margin-left: 0;
  background: white;
  padding: 7px 10px;
  border-radius: 4px;
	margin-left: -8px;
}

.lang-tips-left {
  margin-top: -10px;
  margin-left: -140px;
}

.lang-tips-left:after {
  content: "";
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #000;
  border-right: 10px solid transparent;
  right: -18px;
  top: 12px;
}

.lang-tips-bottom {
  margin-top: 50px;
}

.lang-tips-bottom:after {
  content: "";
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  /* right: calc(50% - 10px); */
  left: 10px;
  top: -20px;
}

/* tips */
.slider-tools-btn image {
  width: 100%;
  height: 100%;
}

.slider-shock {
  animation-delay: 0s;
  animation-name: shock;
  animation-duration: .1s;
  animation-iteration-count: 5;
  animation-direction: normal;
  animation-timing-function: linear;
}

@keyframes shock {
  0% {
	margin-left: 2px;
  }

  100% {
	margin-left: -2px;
  }
}
</style>